<template>
    <div class="history">
    
    
    
        <!-- 顶部导航 -->
    
    
    
        <mu-appbar style="width: 100%;" color="primary">
    
    
    
            历史订单
    
    
    
            <mu-button flat slot="right">退出</mu-button>
    
    
    
        </mu-appbar>
    
    
    
    
    
    
    
        <!-- 表单验证 -->
    
    
    
        <mu-container>
            <mu-card style="width: 100%; max-width: 375px; margin: 20 auto;" class="card">
                <mu-card-title title="XXXXXX检车服务"></mu-card-title>
                <mu-card-text>
    
                    <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" >
                       
                            <div class="formitem">
                                    <span>订单:</span>
                                    <input type="text" value="11111111">
                            </div>
                        
                            <div class="formitem">
                                <span>车牌号:</span>
                                <input type="text" value="22222222">
                            </div>
                            <div class="formitem">
                                <span>订单号:</span>
                                <input type="text" value="33333333">
                            </div>
                    </mu-form>
                </mu-card-text>
            </mu-card>
           
           <mu-card style="width: 100%; max-width: 375px; margin: 20 auto;" class="card">
                <mu-card-title title="XXXXXX检车服务"></mu-card-title>
                <mu-card-text>
    
                    <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" >
                       
                            <div class="formitem">
                                    <span>订单:</span>
                                    <input type="text" value="11111111">
                            </div>
                        
                            <div class="formitem">
                                <span>车牌号:</span>
                                <input type="text" value="22222222">
                            </div>
                            <div class="formitem">
                                <span>订单号:</span>
                                <input type="text" value="33333333">
                            </div>
                    </mu-form>
                </mu-card-text>
            </mu-card>

            <mu-card style="width: 100%; max-width: 375px; margin: 20 auto;" class="card">
                <mu-card-title title="XXXXXX检车服务"></mu-card-title>
                <mu-card-text>
                    <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" >
                            <div class="formitem">
                                    <span>订单:</span>
                                    <input type="text" value="11111111">
                            </div>
                            <div class="formitem">
                                <span>车牌号:</span>
                                <input type="text" value="22222222">
                            </div>
                            <div class="formitem">
                                <span>订单号:</span>
                                <input type="text" value="33333333">
                            </div>
                    </mu-form>
                </mu-card-text>
            </mu-card>
        </mu-container>
    
    </div>
</template>

<script>
    export default {
        data() {
            return {
                    labelPosition: 'left',
                    form: {
                      input: '',
                    }
            }
        }
    }
</script>

<style>
    
    .card {
        margin-top: 20px;
        height: 200px;
        position: relative;
    }
    .mu-demo-form {
        margin-bottom: 50px;
        height: 200px;
        position: absolute;
        left: 10px;
        top: 50px;
    }
   .formitem {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .formitem input {
       border: none;
       outline-style: none;
   }
    
</style>